<template>
  <div>
    <table>
      <tr>
        <td>编号</td>
        <td>图书名称</td>
        <td>作者</td>
      </tr>
      <tr v-if="loading">
        <td colspan="3">加载中...</td>
      </tr>
      <tr v-else v-for="item in books" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.author }}</td>
      </tr>
    </table>
  </div>

  <div>
    <el-table :data="books" stripe style="width: 100%">
      <el-table-column prop="id" label="编号" width="180"/>
      <el-table-column prop="name" label="图书名称" width="180"/>
      <el-table-column prop="author" label="作者" width="180"/>
    </el-table>
  </div>

  <div>
    <el-table :data="data.users" stripe style="width: 100%">
      <el-table-column prop="id" label="编号" width="180"/>
      <el-table-column prop="username" label="账号" width="180"/>
      <el-table-column prop="password" label="密码" width="180" />
    </el-table>
  </div>

  <div>
    <el-tabs type="border-card" class="demo-tabs">

      <el-tab-pane v-for="item in books" :label="item.author">
        <template #label>
          <el-icon>
            <calendar/>
          </el-icon>
        </template>
        <span>{{ item.name }}</span>
      </el-tab-pane>
    </el-tabs>
  </div>

  <div>
    <el-dropdown>
    <span class="el-dropdown-link">
      菜单选择
      <el-icon class="el-icon--right">
        <arrow-down/>
      </el-icon>
    </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item v-for="item in books">{{ item.name }}</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>

  <div>
    <a href="longin">通过a标签跳转</a>
    <br>
    <hr>
    <RouterLink to="longin">跳转到登陆界面</RouterLink>
    <br>
    <hr>
    <el-button type="primary" @click="router.push('/manager/home')">
      使用push编程式跳转(可返回原页面)
    </el-button>
    <el-button type="primary" @click="router.replace('/manager/longin')">
      使用replace编程式跳转(不可返回原页面)
    </el-button>
    <hr>
    <el-button type="primary" @click="router.push('/manager/longin?id=1')">
      路由传参id=1
    </el-button>
    <el-button type="primary" @click="router.push('/manager/longin?id=1&name=123')">
      路由传多个参数 id=1&name=123
    </el-button>
    <el-button type="primary" @click="router.push({path:'/manager/longin',query:{id : 1 ,name : 123}})">
      路由传多个参数，使用query对象实现 id=1&name=123
    </el-button>
    <el-button @click="router.push('/manager/data')">跳转到数据详情</el-button>

  </div>

</template>

<script setup>
import {nextTick, onMounted, reactive, ref} from "vue"
import {ArrowDown, Calendar} from '@element-plus/icons-vue'
import router from '@/router/index.js'
import {getBooks, getUsers} from "@/api/request.js";
import axios from "axios";

const books = ref([])
const data = reactive({
  users: [],
})
const loading = ref(true)

onMounted( () => {

  getBooks().then(res=>{
    books.value=res.data;
  })

  getUsers().then(res => {
    loading.value = false;
      data.users = res.data
  })
})


</script>

<style scoped>
</style>